let Limgul = document.querySelector(".product-info-i ul");
	
	
let next = document.querySelector(".next");

let pave = document.querySelector(".pave");	

let img = document.querySelector(".product-info-l :nth-child(1)");	

let oBox = document.querySelector(".product-info");
let sImg = document.querySelector(".banner>img");
let mark = document.querySelector(".mark");
let big = document.querySelector(".banner");
let bImg = document.querySelector(".big-img>img");
let oProductContent = document.querySelector(".product-info-r")
let bigimg = document.querySelector(".big-img");

const goodsId = json.getUrlData("goodsId");

//弹窗
let LoginAlert = document.querySelector(".LoginAlert");

let plogin = document.querySelector(".plogin");
(function(){
	// console.log(big)
	
	json.get(`${URL}/api_goods`,{goodsId : goodsId},even =>{
		if(even.code != 0){
			return;
			
		};
		
		// 验证商品
		if(even.data.length == 0){
			oProductContent.innerHTML = '此商品已下架...';
			return;
		};
		like();
	
		banner(even.data[0].banner);
	   
		productinfo(even.data[0]);
		
		
		dibu(even.data[0].product_banner);
		
		brand(even.data[0].lc_recommend[4])
		
		// console.log(even.data[0].lc_recommend[4])
		
		let n = 0;
		let Limgli = document.querySelectorAll(".product-info-i ul>li");
		 console.log(next)
		pave.onclick = () =>{
			console.log("11")
			n++;
			
			n = n >= Limgli.length-1 ? Limgli.length-1 : n;
			
			lunbo(n);

		};
		
		next.onclick = () =>{
			n--;
			
			n = n <=0 ? 0 : n;
		
			lunbo(n);
			
		};
		
		
		
		Limgli.forEach((item,index) =>{
			item.onclick = () =>{
				lunbo(index);
			}
		});
		
		bigjing()
		
  })
})();
//品牌简介
function brand(data){
	let content = document.querySelector(".content");
	
	content.innerHTML = data;
}
//放大镜
function bigjing(){
	
	
	// let oLi = document.getElementsByTagName("li");
	
	// console.log(sImg)
	sImg.onmousemove = function(even){
		// console.log(oBox.getBoundingClientRect().left);
		
		let l = even.clientX - oBox.getBoundingClientRect().left -mark.clientWidth/2 ;
		let t = even.clientY- oBox.getBoundingClientRect().top -mark.clientHeight/2  ;
		
		if(l<0){
			l = 0;
		}
		if(t<0){
			t =0;
		}
		let max = sImg.clientWidth - mark.clientWidth;
		if(l > max){
			l = max;
		}
		if(t > max){
			t = max;
		}
		let h = sImg.clientHeight / mark.clientHeight;
		let b =  sImg.clientWidth / mark.clientWidth ;
		
		mark.style.left = l+"px";
		mark.style.top = t+"px";
		
		bImg.style.left = -l*b + "px";
		bImg.style.top = -t*h + "px";
	
	};
	
	big.onmouseenter = function(){
		mark.style.display = "block";
		bigimg.style.display = "block";
	};
	big.onmouseleave = function(){
		mark.style.display = "none";
		bigimg.style.display = "none";
	};
	
}

// 轮播
function lunbo(length){
	let Limgli = document.querySelectorAll(".product-info-i ul>li");
	let lik = Limgli[0].offsetWidth + 20;  
	
	   	//设置边框
	    for(let i = 0 ; i<Limgli.length ; i++ ){
			Limgli[i].style.borderColor = "white";
	    }
	    Limgli[length].style.borderColor = "#000";
		// console.log(Limgli[length].firstChild);
	    sImg.src = Limgli[length].firstChild.src;
		bImg.src = Limgli[length].firstChild.src;
		// console.log(img.src)
		// console.log("1");
		if(length <= 2){
				Limgul.style.left = 0 + 'px';
		}else if(length > 2 && length < Limgli.length - 2){
			Limgul.style.left = -lik * (length-1) + 'px';
		}
		
};
//渲染轮播图
	function banner(banner){
		// console.log(banner)
		let str = '';
		sImg.src = banner[0];
		bImg.src =banner[0];
		banner.forEach((item,index)=>{
			str += `
			<li><img src="${item}">
			</li>`
			;
		});
		Limgul.innerHTML = str;
		
	};
	
	
	
	
	//猜你喜欢
function like(){
		let oUl = document.querySelector(".mian-r ul");
		
		let page = parseInt(Math.random()*10+1);
		let pagesize = 4;
		json.get(`${URL}/api_goods`,{page: page , pagesize: pagesize},even =>{
			// console.log(even);
			if(even.code != 0) return;
			
			even.data.forEach(item =>{
				let li = document.createElement("li");
				li.innerHTML = `
				    <li class="list flex-col-around">
				    	<img src="${item.goods_thumb}">
				    	<div><a class="cai" href="product.html?goodsId=${item.goods_id}">${item.goods_name}</a></div>
				    	<div>${item.brand_name}</div>
				    	<div>￥${item.price}</div>
				    </li>
				`;
				oUl.appendChild(li);
			});
		});
};
	
	//商品信息
function productinfo(data){
		let Productinfo = document.querySelector(".product-info-r");

		let str = `
		    <div class="flex-row"><span></span>${data.star_number}</div>
		    <div><a>${data.brand_name}</a></div>
		    <div>${data.goods_name}</div>
		    <div>价格：<span>￥${data.price}</span></div>
		    <div>
		    	<img src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24690.png">
		    	<span>免运费</span>
		    	<img  src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24689.png">
		    	<span>正品授权</span>
		    </div>
		    <div class="flex-row align-center">
		    	<span>颜色：</span>
		    
		    	<div class=" flex-col align-center">
		    		<img src="${data.banner[0]}">
		    		<div>非偏远地区</div>
		    	</div>
		    </div>
		    
		    <div class= "flex-col align-center">
		    	<img src="${data.banner[0]}">
		    	<div>偏远地区（甘肃 青海 宁夏 海南 内蒙古 新疆 西藏）</div>
		    </div>
		    
		    <div class="flex-row align-center">
		    	<span>数量:</span>
		    	<div class="flex-row align-center">
		    			<img  class="reduce" src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24748.png">
		    			<input  class="number" type="text" value="${data.goods_number}">
		    			<img class="add" src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24750.png">
		    		</div>
		    	</div>
		    	
		    	<div class = "lk flex-col-between">
		    		<div class = "buy">立刻购买</div>
		    		<div class = "flex-row-between">
		    			<div class="cart"><img src="https://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24749.png">加入购物车</div>
		    			<div class="share"><img src="https://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/24/24746.png">分享</div>
		    		</div>
		    	</div>	
		   
		`;
		Productinfo.innerHTML = str;
		
		let oReduce = document.querySelector('.reduce');
		let oAdd = document.querySelector('.add');
		let oNumber = document.querySelector('.number');
		let oCartBtn = document.querySelector('.cart');
		let nowNumber = parseInt(data.goods_number);
		let buyBnt = document.querySelector(".buy")
		console.log(buyBnt)
		
		oReduce.onclick = function(){
			nowNumber = --nowNumber < 1 ? 1 : nowNumber
			oNumber.value = nowNumber;
		};
		
		oAdd.onclick = function(){
			console.log(nowNumber)
			nowNumber = ++nowNumber > 10 ? 10 : nowNumber
			oNumber.value = nowNumber;
		};
		
		//立刻购买
		buyBnt.onclick = function(){
			if(TOKEN == null){
				LoginAlert.style.display = "block";
				plogin.style.display = "block";
				Login();
				return;
			};
			json.post(URL + '/api_settlement', {
				status : 'addsettlement',
				userId : TOKEN,
				from : 'product',
				goodsId: goodsId,
				goodsNumber: nowNumber,
			}, even=>{
				console.log(even);
				if(even.code != 0){
					console.log(even);
					return;
				}
				
				location.href = "pay.html"
			})
		}
		
		oCartBtn.onclick = function(){
			if(TOKEN == null){
				LoginAlert.style.display = "block";
				plogin.style.display = "block";
				Login();
				return;
			};
			
			//调用接口加入购物车
			json.post(URL + '/api_cart', {
				status : 'addcart',
				userId : TOKEN,
				goodsId : goodsId,			
				goodsNumber : parseInt(oNumber.value)
			}, res => {
				console.log(res);
				if(res.code != 0){
					console.log(res);
					return;
				};
				
				// 加车成功
				alert('加入购物车成功，快去购物车查看');
				carlist();
			})
			
		};
		
};

//弹窗登录
function Login(){
	let username = document.querySelector(".inputname");
	let password = document.querySelector(".inputpassword");
	let loginbnt = document.querySelector(".loginBnt");
	console.log(username,password,loginbnt)
	const goodsId = json.getUrlData("goodsId");
	
	loginbnt.onclick = function(){
		if(username.value == '' || password.value == ''){
			alert('用户名或密码不能为空');
			return;
		};
		
		json.post(URL  + '/api_user',{
			username : username.value.trim(),
			password : password.value.trim(),
			status : 'login'
		}, even =>{
			console.log(even)
			if(even.code != 0){
				console.log(even);
				alert('用户名或密码错误');
				return;
			};
			
			localStorage.setItem('username', even.username);
			localStorage.setItem('token', even.user_id);
			alert("登录成功");
			
			// LoginAlert.style.display = "none";
			// plogin.style.display = "none";
			
			location.reload();
		});
	}
}
	//商品图片
function dibu(data){
	let oLft = document.querySelector(".lft");
		
	let str = "";
	
	data.forEach(item =>{
			// console.log(item);
		str += `
		<img src="${item}">
		`;
	});
	oLft.innerHTML = str;
};